<template>
	<view>
		<view class="main">
			<view class="top">
				<view class="top-title">
					<u-icon name='car' color="white" size="60"></u-icon>
					<view v-if="order_info && order_info.status === 0" class="top-box" >
						<view class="right" v-if="order_info">
							请在{{vk.pubfn.timeFormat(order_info.expire_time,"yyyy-MM-dd hh:mm:ss")}}
							前完成支付!</u-count-down></view>
						<view style="font-size: 22rpx;margin-top: 15rpx;">
							{{vk.pubfn.timeFormat(order_info.create_time,"yyyy-MM-dd hh:mm:ss")}}
						</view>
					</view>
					<view v-if="order_info && order_info.status === 1" class="top-box">
						<view class="right" v-if="order_info">
							点击确认核销展示给核销员即可领取</view>
						<view style="font-size: 22rpx;margin-top: 15rpx;">
						
							{{vk.pubfn.timeFormat(order_info.create_time,"yyyy-MM-dd hh:mm:ss")}}
						</view>
					</view>
					<view v-if="order_info && (order_info.status === 2 || order_info.status === 3)" class="top-box">
						<view class="right" v-if="order_info">
							核销完成 完成时间<span style="font-size: 20rpx;margin-left: 8rpx;">{{vk.pubfn.timeFormat(order_info.write_time,"yyyy-MM-dd hh:mm:ss")}}</span></view>
						<view style="font-size: 26rpx;margin-top: 15rpx;">
						
							{{vk.pubfn.timeFormat(order_info.create_time,"yyyy-MM-dd hh:mm:ss")}}
						</view>
					</view>
				</view>
				<view style="display: flex; align-items: center;padding: 20rpx 0;background-color: white;">
					<u-steps :current="order_status" dot activeColor="#E93323" activeIcon="checkmark"
						inactiveIcon="arrow-right">
						<u-steps-item title="待付款"></u-steps-item>
						<u-steps-item title="待领取"></u-steps-item>
						<u-steps-item title="待归还"></u-steps-item>
						<u-steps-item title="已归还"></u-steps-item>
					</u-steps>
				</view>
			</view>
			<view class="qrcode_box" v-if="qr_show && (order_info.status === 1 || order_info.status === 2)">
				<yz-qr  :text="JSON.stringify(write_info)" size="200" quality="L" colorDark="#000000" colorLight="#ffffff"></yz-qr>
				<view>请把当前核销码展示给核销员进行确认</view>
			</view>
			<view class="content">
				<view style="padding: 20rpx;">共{{product_list.length}}件商品</view>
				<u-line></u-line>
				<view class="product-item" v-for="item,index in product_list" :key="item.merchandise_id">
					<image class="banner" :src="item.image" mode="aspectFill"></image>
					<view style="display: flex;justify-content: space-between;flex-grow: 1;">
						<view
							style="display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;">
							<view class="over-hide">
								<view>{{item.title}}</view>
							</view>
							<view style="color: #999999;font-size: 26rpx;">{{item.classification_name}}</view>
							<view style="color: #E93323;font-size: 30rpx;">￥{{item.price}}</view>
						</view>
						<view class="number"> × {{item.number}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-height"></view>
		<view class="bottom">
			<view  v-if="order_status === 0" class="bottom-btn" style="border:1px #CCCCCC solid; color: #666666;" @click="cancelOrder()">
				取消订单
			</view>
			<view   v-if="order_status === 0" class="bottom-btn" style="background-color: #E93323; color: white;">
				立即付款
			</view>
			<view  v-if="order_status === 1" class="bottom-btn" style="background-color: #E93323; color: white;" @click="confirmWrite(1)">
				确认核销
			</view>
			<view  v-if="order_status === 2" class="bottom-btn" style="background-color: #E93323; color: white;" @click="confirmWrite(2)">
				确认归还
			</view>
		</view>
			
		
	</view>
</template>

<script>
	export default {
		computed:{
			write_info(){
				return {
					out_trade_no:this.order_info?.out_trade_no,
					write_status:this.write_status
				}
			}
		},
		watch:{
			order_status(value){
				console.log('value',value)
				if(value == 2 && this.timer){
					uni.showToast({
						title:'商品领取成功!',
						icon:'success'
					})
				}
				
				if(value == 3 && this.timer){
					uni.showToast({
						title:'商品归还成功!',
						icon:'success'
					})
				}
				this.qr_show = false
				console.log("状态有改变 停止定时器")
				clearInterval(this.timer)
			}
		},
		onUnload() {
			console.log('监听返回')
			clearInterval(this.timer)
			uni.$emit('refreshData');
		},
		onHide() {
			clearInterval(this.timer)
		},
		onLoad(option) {
			console.log()
			this.order_id = option.out_trade_no;
			this.getOrderInfo()
		},
		data() {
			return {
				write_status:1, //1 领取 2 归还 
				qr_show:false,
				order_id: '',
				product_list: [],
				order_info: null,
				order_status: -1,
				out_trade_no: 0,
				timer:null
			}
		},
		methods: {
			confirmWrite(status){
				this.write_status = status
				this.qr_show = true
				clearInterval(this.timer)
				this.timer = setInterval(async ()=>{
					console.log('定时器开启 执行')
					this.getOrderInfo()
				},1000)
			},
			async getOrderInfo() {
				let data = await vk.callFunction({
					url: '/client/pages/order/kh/get_order_info',
					data: {
						out_trade_no: this.order_id
					},
				});
				this.order_info = data.data
				this.order_status = data.data.status;
				this.out_trade_no = data.data.out_trade_no;
				this.product_list = data.data.product_list;
			},
			async cancelOrder() {
				let data = await vk.callFunction({
					url: '/client/pages/order/kh/cancel_order',
					title: '请求中...',
					data: {
						out_trade_no: this.out_trade_no
					},
				});
				uni.navigateBack()
				// uni.$emit('refreshData');
			},
			goPay(out_trade_no) {
				uni.navigateTo({
					url: `/pages/order/order_pay/order_pay?out_trade_no=${this.out_trade_no}`
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F5;
	}

	.main {
		.top {
			.top-title {
				display: flex;
				color: white;
				width: 100%;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				background-color: #E93323;
				display: flex;

				/deep/ .u-count-down__text {
					color: white !important;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
				}
				
				.top-box{
					margin-left: 20rpx;padding-top: 20rpx;
				}
			}
		}
	}
	
	
	
	.qrcode_box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		flex-direction: column;
		gap:15rpx;
		font-size: 28rpx;
		background-color: white;
		padding: 20rpx;
	}
	.bottom-height {
		height: calc(130rpx + env(safe-area-inset-bottom));
	}

	.content {
		margin-top: 20rpx;
		background-color: white;
	}

	.product-item {
		padding: 30rpx;
		display: flex;

		.banner {
			width: 160rpx;
			height: 160rpx;
			border-radius: 5rpx;

			margin-right: 20rpx;
		}

		.over-hide {
			font-size: 28rpx;
			width: 300rpx; //宽度
			height: 80rpx;
			display: flex;
			align-items: center;

			view {

				overflow: hidden; //超出文本隐藏
				text-overflow: ellipsis; ///超出部分省略号显示
				display: -webkit-box; //弹性盒模型
				align-items: center;
				-webkit-box-orient: vertical; //上下垂直

				-webkit-line-clamp: 2; //自定义行数
			}
		}

		.number {
			color: #959595;

		}
	}

	.bottom {
		z-index: 2;
		padding: 20rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		bottom: 0;

		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;

		.bottom-btn {
			border-radius: 40rpx;
			width: 180rpx;
			height: 70rpx;
			margin: 0 10rpx 0 10rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
		}
	}
</style>